<template>
  <md-input-item
    v-model="innerValue"
    :type="type"
    :title="title"
    :name="name"
    :placeholder="placeholder"
    :error="error"
    @blur="onBlur"
  >
    <span slot="left" v-if="icon" class="iconfont" :class="icon"></span>
    <img
      :src="imgUrl"
      alt=""
      style="height: 28pt; width: 60pt"
      slot="right"
      @click="changeImg"
      v-if="rightType === '1'"
    />
    <span slot="right" v-if="rightType === '2'" class="link"
      >|&nbsp;&nbsp;&nbsp;<span @click="sendCode" v-if="!isShowCount"
        >获取验证码</span
      ><span v-else>{{ count }}s</span></span
    >
  </md-input-item>
</template>

<script>
import { InputItem } from "mand-mobile";
export default {
  components: {
    [InputItem.name]: InputItem
  },
  props: {
    imgUrl: {
      type: String,
      default: ""
    },
    rightType: {
      type: String,
      default: "0"
    },
    icon: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    title: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    error: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      innerValue: "",
      isShowCount: false,
      count: 60,
      timer: null
    };
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val;
      },
      immediate: true
    },
    innerValue(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    onBlur() {
      this.$emit("blur");
    },
    changeImg() {
      this.$emit("changeImg");
    },
    sendCode() {
      this.$emit("sendCode");
    },
    countdown() {
      this.$message.success("发送验证码成功！");
      clearInterval(this.timer);
      this.timer = null;
      this.isShowCount = true;
      this.timer = setInterval(() => {
        this.count--;
        if (this.count === 0) {
          this.isShowCount = false;
          clearInterval(this.timer);
          this.count = 60;
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style scoped lang="less">
.iconfont {
  .linear_gradient_back(#fad683, #f8962d, #ef8028);
  font-size: 36px;
  -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
  -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
}
.link {
  font-size: 25px;
}
</style>
